<template>
	<div class="order">
		<div class="s">
			<div class="head">
				<span>我的订单</span>
				<div class="box"></div>
				<button class="btn1" @click="go">BACK</button>
				<div class="btn2">
					<Icon type="md-search" size="19"/>
				</div>
			</div>
		</div>
		<div class="z">
			<div class="xz">
				<Button type="primary" @click="times" v-model="states">
					<span>近一个月</span>
				</Button>
				<Button type="primary" @click="state" v-model="states">
					<span>进行中</span>
				</Button>
				<Button type="primary" @click="comment" v-model="states">
					<span>待点评</span>
				</Button>
			</div>
			<div class="search">
				<Input v-model="search">
					<Button slot="append">
						<Icon type="ios-search" size="20"/>
					</Button>
				</Input>

			</div>
		</div>
		<div class="li" v-if="!show">
			<div class="img">
				<img :src="orange" alt="">
			</div>

		</div>
		<div class="li2" v-if="show">
			<div class="xiang" v-for="order in corde">
				<div class="left">
<!--					<img :src="'/static/img/'+order.headimg" alt="">-->
				</div>
				<div class="right">
					<div class="top">订单
						<button @click="modal(order.id)">详情</button>
					</div>
					<div class="bood">
						店铺：{{order.shop_name}}
						<br>
						时间：{{order.creattime}}
						<br>
						评价：{{order.comment}}
						<br>
						总价：{{order.price}}
					</div>
				</div>
			</div>
		</div>
		<Modal v-model="modal1" title="订单详情">
			<table style="width: 100%;text-align: center;">
				<tr>
					<th>商品</th>
					<th>价格</th>
					<th>个数</th>
				</tr>
				<tr v-for="orde in orders">
					<td>{{orde.commodity_name}}</td>
					<td>{{orde.price}}</td>
					<td>{{orde.number}}</td>
				</tr>
			</table>
		</Modal>
	</div>
</template>

<script>
	import axios from 'axios'

	export default {
		name: "Discount",
		data() {
			return {
				orange: require("../../assets/order.png"),
				back: '',
				states: '',
				show: false,
				orde: [],
				modal1: false,
				stater: 0,
				orders: [],
				star:[],
				search:'',
			}
		},
		async mounted() {
			var users = JSON.parse(localStorage.users)
			let or = await axios.post('reception/assembly/orders', {id: users.id}).then(r => r.data)
			console.log(or)
			this.star=or.orders
			if (this.star.length != 0) {
				this.show = true
				this.orde = or
			}
		},
		computed: {
			corde() {
				if(this.states!=""){
					return this.star.filter(b=>b.state.includes(this.states))
				}
				if(this.search!=null){
					return this.star.filter(b=>b.shop_name.includes(this.search))
				}
				}
		},
		methods: {
			info() {
				this.loading = true
			},
			go() {
				return this.$router.push('/users/index')
			},
			async modal(id) {
				this.modal1 = true
				let orders = await axios.post('reception/Assembly/order_info', {id: id}).then(r => r.data)
				this.orders = orders.order_info
			},
			comment() {
				this.states = '待点评'
			},
			times() {
				this.states = ''
			},
			state() {
				this.states = '进行中'
			},
		}
	}
</script>
<style lang="less">
	.order {
		max-width: 1024px;
		max-height: 1366px;
		margin: auto;

		.s {
			width: 100%;
			background-color: white;

			.headrs {
				width: 100%;
				height: 111px;
				background-repeat: no-repeat;
				background-size: 230px;
				background-position: 70%;
			}
		}

		.el {
			margin-left: 5%;
			width: 27%;
			text-align: center;
		}

		.ivu-dropdown-rel {
			margin-top: 10px;
			background-color: #FE7676;
			border-radius: 8px;
		}

		.ivu-btn-primary {
			height: 33px;
			background-color: #FE7676;
			border: #FE7676;
			border-radius: 50%;
		}

		.ivu-input-group-append {
			border: 0px;
		}

		.ivu-input {
			height: 25px;
		}

		.ivu-avatar {
			height: 44px;
			width: 50px;
		}

		.ivu-list-item-meta-avatar {
			margin-left: 16px;
		}

		.ivu-list-item-action > li:after {
			content: none;
		}

		.ivu-list-item-action {
			position: absolute;
			right: 0;
			bottom: 0;
		}

		.li2 {
			width: 100%;
			height: 532px;
			overflow: auto;
			background-color: #B0C1D3;

			.img {
				width: 100%;
				text-align: center;
			}

			.xiang {
				height: 115px;
				width: 100%;

				position: relative;

				.left {
					position: absolute;
					left: 2%;
					top: 8%;
					width: 30%;
					height: 92%;
					background-color: white;
					padding: 2%;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					position: absolute;
					right: 2%;
					top: 8%;
					width: 64%;
					height: 92%;
					background-color: white;
					line-height: 1;
					border: 0px;
					padding: 2%;

					.top {
						height: 25%;
						line-height: 1;
						font-weight: bold;
						position: relative;

						button {
							position: absolute;
							right: 10px;
							height: 19px;
							background-color: rgba(0, 0, 0, 0);
							border: 0;
							text-align: center;
							background-repeat: no-repeat;
							background-size: 19px;
						}
					}

					.bood {
						height: 55%;
						line-height: 1.5;
					}

					/*.foot {*/
					/*	height: 20%;*/
					/*	text-align: right;*/

					/*	*/
					/*}*/
				}
			}
		}

		.li {
			width: 100%;
			height: 532px;
			overflow: auto;

			.img {
				width: 100%;
				text-align: center;
			}
		}

		.ivu-list-items {
			min-height: 100px
		}

		.ivu-list-item {
			padding: 0;
			border: 0px;

			img {
				height: 44px;
				width: 44px;
			}
		}

		.z {
			width: 100%;
			height: 100px;
			margin-top: 12px;

			.xz {
				button {
					background-color: #F27573;
					border-radius: 0px;
					color: white;
					height: 30px;
					width: 28%;
					margin-left: 4%;
					border-radius: 5px;
				}

				button:focus {
					background-color: #F69E9D;
				}
			}

			.search {
				margin: 10px 4%;
				width: 92%;
				height: 30px;
				background-color: #F27573;
				padding: 1px 2%;
				text-align: center;

				input {
					border-radius: 0px;
				}

				button {
					background-color: #F27573;
					border-radius: 0px;
					color: white;
					height: 25px;
					padding-top: 0;
				}
			}

		}

		.z > .head {
			padding: 0;
		}

		.head {
			height: 35px;
			color: white;
			width: 100%;
			background: #9BB1C8;
			font-size: 22px;
			text-align: center;
			padding-right: 38px;
			line-height: 1.5;
			position: relative;
		}

		.head > .btn2 {
			height: 25px;
			width: 25px;
			float: right;
			margin-top: 5px;
			text-align: center;
			padding-top: 3px;
			line-height: 0px;
			background-color: white;
			color: #9BB1C8;
			border-radius: 5px;
		}

		.box {
			width: 0;
			height: 0;
			margin-top: 7px;
			float: left;
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 11px solid transparent;
			border-right: 11px solid white;
			/*background-color:#FEFE00 ;*/
		}

		.clear {
			clear: both;
		}

		.btn1 {
			background: white;
			font-size: 10px;
			margin-top: 7px;
			margin-left: -1px;
			color: #9BB1C8;
			height: 22px;
			padding: 0px 5px;
			border: 1px aliceblue solid;
			border-radius: 10%;
			cursor: pointer;
			float: left;
		}
	}

</style>